<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .title {
            font-weight: 600;
            font-size: 20px;
            background-color: #ccc;
        }
        .title2 {
            font-weight: 600;
            font-size: 20px;
            background-color: #f46969;
        }
        td {
            height: 50px;
            width: 100px;
        }
        .meng1 {
            background-color: #777777d6;
            z-index: 1;
            height: 100vh;
            width: 100vw;
            position: fixed;
            top: 0;
            left: 0;
        }
        .meng2 {
            background-color: aliceblue;
            z-index: 2;
            height: 350px;
            width: 400px;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            flex-direction: column;
            justify-content: space-around;
        }
        input {
            padding: 10px;
            margin: 10px;
        }
        .noshow {
            display: none;
        }
    </style>
</head>
<body>
    <!-- 1.3行2列的表格，书名和价格，4个按钮：增加一行，删除第n行，修改标题样式，克隆最后一行
    2.登录按钮，点击创建一个蒙层z-index为1，然后再创建一个登录框，z-index为2，点击登录或者旁边×清除这两个盒子 -->

    <table border="1" align="center" cellspacing="0" style="text-align: center">
        <tbody>
            <tr class="title">
                <td>书名</td>
                <td>价格</td>
            </tr>
            <tr>
                <td>《语文》</td>
                <td>39.9</td>
            </tr>
            <tr>
                <td>《数学》</td>
                <td>37.9</td>
            </tr>
        </tbody>
    </table>
    <hr>
    <div>
        <button>添加一行</button>
        <button>删除最后一行</button>
        <button>修改标题样式</button>
        <button>克隆最后一行</button>
    </div>
    <div class="meng1"></div>
    <form action="#" class="meng2">
        <p>用户名：</p>
        <input type="text">
        <p>密码：</p>
        <input type="password">
        <br>
        <input type="submit">
    </form>
    <script>
        const btn = document.querySelectorAll("button")
        const tbody = document.querySelector("tbody")
        const meng1 = document.querySelector(".meng1")
        const meng2 = document.querySelector(".meng2")

        btn[0].onclick = function () {
            let newTr = document.createElement("tr")
            newTr.innerHTML = "<td>《英语》</td><td>28</td>"
            tbody.appendChild(newTr)
            console.log(trLast)
        }

        btn[1].onclick = function () {
            let trLast = tbody.lastElementChild
            tbody.removeChild(trLast)
        }

        btn[2].onclick = function () {
            let title = tbody.firstElementChild.firstElementChild
            let newTitle = title.setAttribute("class", "title2")
            tbody.replaceChild(newTitle, title)
        }

        btn[3].onclick = function () {
            let trLast = tbody.lastElementChild
            let cloneLast = trLast.cloneNode(true)
            tbody.appendChild(cloneLast)
        }

        let submit = meng2.lastElementChild
        submit.onclick = function () {
            meng1.setAttribute("class", "noshow")
            meng2.setAttribute("class", "noshow")
        }
        console.log(submit)
    </script>
</body>
</html>